<template>
  <view class="p-20rpx bg-[#F2F2F6]">
    <!-- 总计 -->
    <view class="bg-[#fff] mt-12rpx pb-12rpx">
      <view v-if="total">
        <!-- 图表 -->
        <view style="width: 100%; height: 300rpx">
          <l-echart ref="chartRef" @finished="init"></l-echart>
        </view>
        <!-- 已完成 -->
        <view class="completed">
          <view class="text-[#3D3D3D] fw-700 text-28rpx">已完成</view>
          <view class="flex items-center justify-between mt-12rpx">
            <view class="text-[#858585] text-24rpx">
              作业完成量：
              <text class="text-[#3670F7]">{{ finish }}</text>
            </view>
            <view class="text-[#858585] text-24rpx">
              占比：
              <text class="text-[#3670F7]">{{ finishRate }}%</text>
            </view>
          </view>
          <wd-progress :percentage="finishRate" hide-text color="#3670F7"></wd-progress>
        </view>
        <!-- 未完成 -->
        <view class="unfinished">
          <view class="text-[#3D3D3D] fw-700 text-28rpx">未完成</view>
          <view class="flex items-center justify-between mt-12rpx">
            <view class="text-[#858585] text-24rpx">
              作业完成量：
              <text class="text-[#3670F7]">{{ unFinish }}</text>
            </view>
            <view class="text-[#858585] text-24rpx">
              占比：
              <text class="text-[#3670F7]">{{ unFinishRate }}%</text>
            </view>
          </view>
          <wd-progress :percentage="unFinishRate" hide-text color="#D8D8D8"></wd-progress>
        </view>
      </view>
      <view v-else class="flex-center">
        <wd-status-tip :image="emptyImage" tip="暂无数据" />
      </view>
    </view>
    <!-- 各班 -->
    <wd-collapse v-model="state.collapseValue" accordion class="mt-20rpx">
      <wd-collapse-item
        v-for="(item, index) in state.list"
        :key="index"
        :title="item.className"
        :name="item.classId"
      >
        <view v-for="(e, i) in item.submissionList" :key="i" class="items-2">
          <view class="flex items-center">
            <wd-img :src="e.headshot" size="70rpx" class="border-rd-[100%]" />
            <view class="ml-12rpx view">
              <view class="text-[#3D3D3D] fw-700 text-24rpx mb-8rpx">{{ e.name }}</view>
              <text class="text-[#999999] text-20rpx">已交作业：{{ e.finishNum }}</text>
            </view>
          </view>
        </view>
      </wd-collapse-item>
    </wd-collapse>
  </view>
</template>

<script setup lang="ts">
/* 引入 echarts 组件 */
import LEchart from '@/components/l-echart/l-echart.vue'
import * as echarts from 'echarts'
/* 引入 配置 option */
import { legend, angleAxis, radiusAxis, polar, tooltip } from '../config/index'
/* 引入 暂无数据 - 图片 */
import emptyImage from '@/static/images/icons/empty.png'
/* 引入 接口 */
import { getEchartsDataApi, getDetailsApi } from '@/service/edu/analysis/index'

const chartRef = ref<any>(null)
const finish = ref(0)
const finishRate = ref(0)
const unFinish = ref(0)
const unFinishRate = ref(0)
const total = ref(0)

/* 定义数据 */
const state = reactive({
  collapseValue: [],
  list: [],
  option: {},
})

/* 获取 echarts 数据 */
async function getEchartsData(courseId: number | string) {
  /* 调取接口 */
  const res = await getEchartsDataApi({
    courseId,
  })
  finish.value = res.data.finish || 0
  finishRate.value = res.data.finishRate || 0
  unFinish.value = res.data.unFinish || 0
  unFinishRate.value = res.data.unFinishRate || 0
  total.value = res.data.total || 0
  /* 设置值 */
  const subtext = total.value || 0
  const finishRateData = finishRate.value || 0
  state.option = {
    legend,
    angleAxis,
    radiusAxis,
    polar,
    tooltip,
    title: {
      text: '总计',
      textStyle: {
        color: '#666666',
        fontSize: 14,
        fontWeight: 500,
      },
      itemGap: 12,
      left: 'center',
      top: '24%',
      subtext,
      subtextStyle: {
        color: '#333333',
        fontSize: 30,
        fontWeight: 700,
      },
    },
    series: [
      {
        type: 'bar',
        data: finishRateData,
        z: 1,
        coordinateSystem: 'polar',
        barMaxWidth: 12,
        name: '已完成',
        roundCap: true,
        barGap: '-100%',
        itemStyle: {
          normal: {
            color: {
              // 完成的圆环的颜色
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(13.000000175088644, 83.00000265240669, 255, 1)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(32.00000189244747, 164.00000542402267, 255, 1)', // 100% 处的颜色
                },
              ],
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        },
      },
      {
        // 浅色背景
        type: 'bar',
        data: [100],
        z: 0,
        silent: true,
        coordinateSystem: 'polar',
        barMaxWidth: 12,
        name: '未完成',
        roundCap: true,
        color: '#dae1f3',
        barGap: '-100%',
      },
      {
        type: 'pie',
        center: ['26.5%', '73%'],
        hoverAnimation: false,
        startAngle: 90,
        endAngle: 0,
        data: [
          {
            name: '',
            value: finishRateData,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: 'rgba(255,255,255,0)',
            },
          },
          {
            // 画中间的图标
            name: '',
            value: 0,
            label: {
              position: 'inside',
              backgroundColor: '#fff',
              borderRadius: 20,
              borderWidth: 1,
              // 大小
              padding: 4,
            },
          },
          {
            name: '',
            value: 100 - finishRateData,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: 'rgba(255,255,255,0)',
            },
          },
        ],
      },
    ],
  }
}

/* 获取 折叠面板 数据 */
async function getDetails(courseId: number | string) {
  const res = await getDetailsApi({
    courseId,
  })
  state.list = res.data
}

// 渲染完成
const init = () => {
  // 渲染完成之后做的操作
  console.log('渲染完成')
}

/* 渲染图表 */
onLoad(async (query) => {
  if (query.courseId) {
    await getEchartsData(query.courseId)
    await getDetails(query.courseId)
  }
  nextTick(() => {
    /* 初始化图表 */
    if (chartRef.value) {
      console.log('[ chart.value ] 🌸>', chartRef.value)
      chartRef.value.init(echarts, (charts) => {
        console.log('[ state.option ] 🌸>', state.option)
        charts.setOption(state.option)
      })
    }
  })
})
</script>

<style lang="scss" scoped>
/* 已完成 */
.completed,
.unfinished {
  padding: 30rpx 20rpx;
  margin: 30rpx 40rpx;
  background-color: #f7f7f7;

  :deep(.wd-progress),
  :deep(.wd-progress__outer) {
    height: 20rpx;
    border-radius: 20rpx;
  }
  :deep(.wd-progress__outer) {
    background-color: #edeff2;
  }
  :deep(.wd-progress__inner) {
    border-radius: 20rpx;
  }
}

.unfinished {
  :deep(.wd-progress__inner) {
    background-color: #d8d8d8 !important;
  }
}

:deep(.wd-collapse) {
  border-radius: 12rpx;
}

:deep(.wd-collapse-item__title) {
  font-size: 24rpx;
  font-weight: 700;
  color: #3d3d3d;
}

.items-2 {
  margin-bottom: 40rpx;
  .view {
    flex: 1;
    padding-bottom: 12rpx;
    border-bottom: solid 1rpx #e8e8e8;
  }
}

.items-2:nth-last-child(1) {
  margin-bottom: 0;
  .view {
    border-bottom: 0;
  }
}

:deep(.wd-img) {
  .wd-img__image {
    border-radius: 100%;
  }
}
</style>
